const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    cleanCss = require('gulp-clean-css'),
    del = require('del'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    connect = require('gulp-connect'),
    sass = require('gulp-sass')


const delDist = () => del(['./dist'])


const path = {
    html: {
        src: './FOREVER/**/*.html',
        dest: './dist'
    },
    css: {
        src: './FOREVER/css/**/*.scss',
        dest: './dist/css'
    },
    js: {
        src: './FOREVER/js/**/*.js',
        dest: './dist/js'
    },
    img: {
        src: './FOREVER/images/**/*',
        dest: './dist/images'
    },
    libs: {
        src: './FOREVER/libs/**/*',
        dest: './dist/libs'
    }
}


const html = () => {

    return gulp.src(path.html.src)
        .pipe(htmlmin({
            removeComments: true, //清除HTML注释
            collapseWhitespace: true, //压缩HTML
            collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
            removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
            removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
            minifyJS: true, //压缩页面JS
            minifyCSS: true //压缩页面CSS 
        }))
        .pipe(gulp.dest(path.html.dest))
        .pipe(connect.reload())
}

const css = () => {
    return gulp.src(path.css.src)
        .pipe(sass())
        .pipe(cleanCss())
        .pipe(gulp.dest(path.css.dest))
        .pipe(connect.reload())
}

const js = () => {
    return gulp.src(path.js.src)
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest(path.js.dest))
        .pipe(connect.reload())
}

const img = () => gulp.src(path.img.src).pipe(gulp.dest(path.img.dest))

const libs = () => gulp.src(path.libs.src).pipe(gulp.dest(path.libs.dest))

const server = () => {
    connect.server({
        root: 'dist',
        livereload: true,
        port: 1998
    })
}

const watch = () => {
    gulp.watch(path.html.src, html)
    gulp.watch(path.css.src, css)
    gulp.watch(path.js.src, js)
}

module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, img, libs, server, watch))